<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船货信息" name="1">
				<template slot="title">
					<div class="compTop">
						<span class="cTitle">船舶信息</span>
						<span class="compTitle">组织</span>
						<el-select
							v-model="formData.companyId"
							v-selecttext="formData.companyName,compData,'companyId'"
							filterable
							collapse-tags
							size="mini"
							clearable
							:disabled="isGet"
							class="compList"
							@change="getCharging"
						>
							<el-option
								v-for="item in compData"
								:key="item.companyId"
								:label="item.companyName"
								:value="item.companyId"
							></el-option>
						</el-select>
					</div>
				</template>
				<el-form :model="formData" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input v-model="formData.shipvoyageName" size="mini" placeholder="请输入船名" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="货主" prop="cargoOwnerName" class="top">
								<el-input v-model="formData.cargoOwnerName" size="mini" placeholder="请输入货主" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="货代" prop="cargoAgentName" class="top">
								<el-input v-model="formData.cargoAgentName" size="mini" placeholder="请输入货代" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="净吨" prop="netTon" class="top">
								<el-input v-model="formData.netTon" size="mini" placeholder="请输入净吨" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="靠泊时间" prop="berthTime" class="top">
								<el-input v-model="formData.berthTime" size="mini" placeholder="请输入靠泊时间" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="离泊时间" prop="leaveBerthTime" class="top">
								<el-input v-model="formData.leaveBerthTime" size="mini" placeholder="请输入离泊时间" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="非生产性停时(小时)" prop="cargoStopHours" class="top">
								<div slot="label" style="display: inline-block" :style="{ width: '300px' }">
									<span style="margin-right: 20px">非生产性停时(货方原因)</span>
									<el-button size="mini" type="primary" @click="getStopRecord">查询停工记录</el-button>
								</div>
								<el-input size="mini" v-model="formData.cargoStopHours" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item
								label="付款单位"
								prop="payCompanyId"
								class="top"
								:rules="[{ required: true, message: '付款单位不能为空' }]"
							>
								<el-select
									v-model="formData.payCompanyId"
									v-selecttext="formData.payCompanyName,customerData,'customerId','customerName'"
									filterable
									size="mini"
									clearable
									class="others"
									:disabled="isGet"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<el-card class="bgcard">合计金额 ： {{ formData.totalAmount }}</el-card>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="formData.costList"
									:columns="tableColumn"
									:tableHeight="tableHeight"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
		<el-dialog title="停工记录" :visible.sync="stopRecordDrawer" width="50%" append-to-body>
			<BaseTable :data="stopData" :columns="stopColumn" :tableHeight="300" :pagination="false"></BaseTable>
		</el-dialog>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/billingSettlementSys/cargoCost/demurrage/index'
import publicapi from '@/api/public'

export default {
  name: 'chargingDetail',
  components: { BaseTable },
  props: {
    customerData: {
      type: Array
    },
    isGet: {
      type: Boolean,
      default: false
    },
    clickRow: {
      type: Object
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        shipvoyageName: '',
        companyId: '',
        companyName: '',
        cargoOwnerName: '',
        cargoAgentName: '',
        netTon: '',
        cargoStopHours: '',
        berthTime: '',
        leaveBerthTime: '',
        costList: [],
        payCompanyId: '',
        id: '',
        totalAmount: 0 // 总计金额
      }, // from
      compData: [],
      tableColumn: [
        // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'quantity', label: '数量' },
        { prop: 'rate', label: '单价' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'quantityPlug', label: '时长(日/时)' },
        { prop: 'amount', label: '金额(元)', isMoney: true },
        { prop: 'tax', label: '税率' },
        { prop: 'taxAmount', label: '税额', isMoney: true }
      ],
      stopData: [], // 停工记录
      stopColumn: [
        // 停工记录表头
        { prop: 'stopTime', label: '停工时间', width: 270 },
        { prop: 'stopHours', label: '停工时长(小时)' },
        { prop: 'stopName', label: '停工原因' },
        { prop: 'stopTypeName', label: '停工类型' }
      ],

      remark: '', // 提单备注
      shipId: '',
      stopRecordDrawer: false
    }
  },
  created() {
    this.getComp()
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 300
    }
  },
  methods: {
    /**
		 * 修改组织获取结算信息
		 */
    async getCharging(e, settlement) {
      api.reqGetSettlement(this.shipId, e)
        .then(res => {
          this.formData.payCompanyId = res.data.data.payCompanyId
          this.formData.costList = res.data.data.costList
          this.formData.id = res.data.data.id
          if (settlement) {
            this.formData.companyId = res.data.data.companyId
          }
        })
        .catch(() => {
          this.formData.costList = []
        })
    },
    /**
		 * 打开停工记录
		 */
    async getStopRecord() {
      this.stopRecordDrawer = true
      const res = await api.reqGetStopRecord(this.shipId)
      this.stopData = res.data.data
    },
    /**
		 * 获取业务单元
		 */
    async getComp() {
      const res = await publicapi.getListComp()
      this.compData = res.data.data
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
